<template>
  <div>
    <BasicModal
      v-bind="$attrs"
      :title="t('routes.components.permissionModal.permissionSetting')"
      @register="register"
      :showCancelBtn="false"
      :showOkBtn="false"
      :destroyOnClose="true"
      :minHeight="500"
      :width="800"
    >
      <!-- 底部区域(会替换掉默认的按钮) -->
      <template #footer>
        <a-button @click="handlePerDisplay">{{
          t('routes.modal.permissionModal.permissionShow')
        }}</a-button>
        <a-button @click="handlerSetTypePermission">{{
          t('routes.modal.permissionModal.permissionType')
        }}</a-button>
        <a-button color="error" @click="handleCancel">{{
          t('routes.modal.permissionModal.exit')
        }}</a-button>
      </template>
      <Row>
        <Col :span="12">
          <!-- 用户 -->
          <userPermission ref="userPermissionRef" @sendFileTypeData="handleFileTypeData" />
        </Col>
        <Col :span="12">
          <!-- 权限 -->
          <BasicTable
            @register="registerTable"
            :rowSelection="{
              type: 'checkbox',
              onChange: handleDocPerCheck,
            }"
          />
        </Col>
      </Row>
    </BasicModal>
    <permissionShowModal @register="registerPermissionShowModal" />
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { Row, Col } from 'ant-design-vue';
  import { BasicModal, useModalInner, useModal } from '/@/components/Modal';
  import { BasicTable, useTable } from '/@/components/Table';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { getPerTypeModalColumns } from './tableData';
  import { GetFormattedPdmdoctypes, UpdatePermissionsType } from '/@/api/demo/document';
  import permissionShowModal from './components/permissionShowModal.vue';

  import userPermission from './components/userPermission.vue';

  const { t } = useI18n();
  const { createMessage } = useMessage();
  const userPermissionRef = ref<any>(null);
  const typeSelectData = ref([]);

  const handleFileTypeData = (data) => {
    const SelectedRowKeys = data.map((item) => item.id);
    setSelectedRowKeys(SelectedRowKeys);
  };
  // 权限显示
  const handlePerDisplay = () => {
    // 判断部门层级关联还是层级独立
    const departSelectResult =
      userPermissionRef.value.departSelectedData.hasOwnProperty('checked') &&
      userPermissionRef.value.departSelectedData.checked.length > 0
        ? userPermissionRef.value.departSelectedData.checked
        : userPermissionRef.value.departSelectedData;
    // 判断角色层级关联还是层级独立
    const roleSelectResult =
      userPermissionRef.value.roleSelectedData.hasOwnProperty('checked') &&
      userPermissionRef.value.roleSelectedData.checked.length > 0
        ? userPermissionRef.value.roleSelectedData.checked
        : userPermissionRef.value.roleSelectedData;
    const selectedDataMap = {
      user: {
        data: userPermissionRef.value.userSelectedData,
        message: t('routes.modal.permissionModal.selectUser'),
      },
      depart: {
        data: departSelectResult,
        message: t('routes.modal.permissionModal.selectDepartment'),
      },
      role: {
        data: roleSelectResult,
        message: t('routes.modal.permissionModal.selectRole'),
      },
    };

    const { data, message } = selectedDataMap[userPermissionRef.value.activeKey] || {};
    if (!data || data.length === 0) {
      createMessage.warning(message);
    } else {
      if (userPermissionRef.value.activeKey === 'user') {
        openPermissionShowModal(true, {
          userSelectData: userPermissionRef.value.userSelectedData,
          typeSelectData: typeSelectData.value,
          userType: userPermissionRef.value.activeKey,
          type: 'fromFileType',
        });
      } else if (userPermissionRef.value.activeKey === 'depart') {
        openPermissionShowModal(true, {
          userSelectData: departSelectResult,
          typeSelectData: typeSelectData.value,
          userType: userPermissionRef.value.activeKey,
          type: 'fromFileType',
        });
      } else if (userPermissionRef.value.activeKey === 'role') {
        openPermissionShowModal(true, {
          userSelectData: roleSelectResult,
          typeSelectData: typeSelectData.value,
          userType: userPermissionRef.value.activeKey,
          type: 'fromFileType',
        });
      }
    }
  };

  // 类型权限设定
  const handlerSetTypePermission = async () => {
    // 判断部门层级关联还是层级独立
    const departSelectResult =
      userPermissionRef.value.departSelectedData.hasOwnProperty('checked') &&
      userPermissionRef.value.departSelectedData.checked.length > 0
        ? userPermissionRef.value.departSelectedData.checked
        : userPermissionRef.value.departSelectedData;
    // 判断角色层级关联还是层级独立
    const roleSelectResult =
      userPermissionRef.value.roleSelectedData.hasOwnProperty('checked') &&
      userPermissionRef.value.roleSelectedData.checked.length > 0
        ? userPermissionRef.value.roleSelectedData.checked
        : userPermissionRef.value.roleSelectedData;
    const selectedDataMap = {
      user: {
        data: userPermissionRef.value.userSelectedData,
        message: t('routes.modal.permissionModal.selectUser'),
      },
      depart: {
        data: departSelectResult,
        message: t('routes.modal.permissionModal.selectDepartment'),
      },
      role: {
        data: roleSelectResult,
        message: t('routes.modal.permissionModal.selectRole'),
      },
    };

    const { data, message } = selectedDataMap[userPermissionRef.value.activeKey] || {};
    if (!data || data.length === 0) {
      createMessage.warning(message);
    } else {
      if (userPermissionRef.value.activeKey === 'user') {
        const params = {
          typeSelectData: typeSelectData.value,
          userSelectData: userPermissionRef.value.userSelectedData,
        };
        await UpdatePermissionsType(params);
        createMessage.success(t('common.saveSuccess'));
      } else if (userPermissionRef.value.activeKey === 'depart') {
        const params = {
          typeSelectData: typeSelectData.value,
          departSelectData: departSelectResult,
        };
        await UpdatePermissionsType(params);
        createMessage.success(t('common.saveSuccess'));
      } else if (userPermissionRef.value.activeKey === 'role') {
        const params = {
          typeSelectData: typeSelectData.value,
          roleSelectData: roleSelectResult,
        };
        await UpdatePermissionsType(params);
        createMessage.success(t('common.saveSuccess'));
      }
    }
  };

  // 关闭弹窗
  const handleCancel = () => {
    closeModal();
  };
  // 权限选择
  const handleDocPerCheck = (checkedKeys: any) => {
    typeSelectData.value = checkedKeys;
  };

  // 权限类型显示
  const [registerPermissionShowModal, { openModal: openPermissionShowModal }] = useModal();

  // 初始化弹窗
  const [register, { setModalProps, closeModal }] = useModalInner(() => {
    setModalProps({ confirmLoading: false });
  });

  // 表格初始化
  const [registerTable, { setSelectedRowKeys }] = useTable({
    columns: getPerTypeModalColumns(),
    api: GetFormattedPdmdoctypes,
    bordered: true,
    useSearchForm: false,
    showIndexColumn: false,
    showTableSetting: true, // 显示表格设置工具
    tableSetting: { fullScreen: false }, // 表格设置工具配置
    // pagination: { pageSize: 5, pageSizeOptions: ['5', '10', '15', '20'], defaultPageSize: 5 },
    rowKey: 'id',
    pagination: false,
    maxHeight: 300,
    // canResize: false,
    striped: false,
  });
</script>

<style scoped></style>
